<template>
  <div>
    <m-detail
      title="图片"
      type="image"
      control
      :data="imgList"
      @onImageClick="imgClick"
    />
    <m-detail
      title="地理位置"
      :center="{ lng: 112.87782755812421, lat: 28.211583992576543 }"
      address="中国湖南省长沙市岳麓区麓谷企业广场"
      type="map"
      control
    ></m-detail>
    <m-detail title="默认浏览器定位" :height="400" type="map"></m-detail>
    <m-detail title="办理流程" :data="process" type="process"></m-detail>
    <m-detail title="基础信息" status="任务状态" :data="info"></m-detail>
    <m-detail title="任务详情" control :data="info"></m-detail>
    <m-detail title="基础信息" control :data="info" :column="3"> </m-detail>
  </div>
</template>

<script>
import {
  MCaseList,
  MStar,
  MTaskInfoList,
  MDetail,
  MTimeline,
  MImagePicker,
  MMenu,
} from "maple-mini-ui";
export default {
  components: {
    MCaseList,
    MStar,
    MTaskInfoList,
    MDetail,
    MTimeline,
    MImagePicker,
    MMenu,
  },
  data() {
    return {
      imgList: [
        {
          src: "https://img2.baidu.com/it/u=3382019668,1605723655&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        },
        {
          src: "https://img0.baidu.com/it/u=857510153,4267238650&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675",
        },
        {
          src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F21042G4331941H-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651201522&t=6301d1ecdb3ca522e822ed80195b17ba",
        },
        {
          src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F061H0102U6%2F20061G02U6-12-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651201494&t=b348c3acf1d974116cf77fd54996750e",
        },
        {
          src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651201477&t=1721bbe37aa1a937cf883069916ddc1e",
        },
        {
          src: "https://img0.baidu.com/it/u=2495658973,2184971954&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
        },
      ],
      process: [
        {
          title: "开始受理",
          content: [
            "经办:" + "受理员",
            "办理意见:" + "自动受理",
            "2022-03-27 16:17:39",
          ],
          // icon: 'clock',
          color: "green",
          dot: "solid",
        },
        {
          title: "待受理",
          content: [
            "经办:" + "市民",
            "办理意见:" + "待受理",
            "2022-03-27 16:17:39",
          ],
          color: "red",
          dot: "solid",
        },
        {
          title: "受理中",
          content: [
            "经办:" + "市民",
            "办理意见:" + "待受理",
            "2022-03-27 16:17:39",
          ],
          color: "yellow",
          dot: "hollow",
        },
        {
          title: "耐心等待",
          content: [
            "经办:" + "市民",
            "办理意见:" + "待受理",
            "2022-03-27 16:17:39",
          ],
          dot: "solid",
        },
        {
          title: "已受理",
          content: [
            "经办:" + "市民",
            "办理意见:" + "待受理",
            "2022-03-27 16:17:39",
          ],
          dot: "solid",
        },
      ],
      info: {
        性别: "男",
        出生日期: "2000-5-23",
        所属区域: "xxx省xxx市xxxx区",
        所属道路: "雷锋大道",
        所属楼宇: "57栋",
        扩展信息: "其他信息",
        地址: "中国湖南省长沙市岳麓区麓谷企业广场F4栋902室",
      },
    };
  },
  methods: {
    imgClick(item) {
      alert(item.src);
    },
  },
};
</script>
